<template>
	<view style="margin-top: 170rpx;background-color: #e1e1e1;">
		<u-navbar title="二手市场" @rightClick="rightClick" :autoBack="true">
		</u-navbar>

		<u-sticky bgColor="#fff" offset-top="90">
			<view style="margin-left: 28rpx;margin-right: 28rpx;height: 60rpx;background-color: #ffffff;">
				<u-search :showAction="false" :animation="false" v-model="params.content"
					@search="getList()"></u-search>
			</view>
			<u-tabs :list="list1" @click="click"></u-tabs>
		</u-sticky>
		<view class="goods_list">
			<view class="goods_item" v-for="item in loveList" :key="item.id" @click="nation(item.id)">
				<image :src="item.picUrls[0].picUrl" mode="aspectFill"></image>
				<view class="name" style="display: flex;justify-content: space-between">
					<text
						style="font-size: 16px;font-weight: 600;margin-left: 5rpx;margin-right: 9rpx;">{{item.content}}</text>
					<view style="width: 100rpx;">
						<u-tag :text="item.news+'成新'" shape="circle" size='mini' plain></u-tag>
					</view>
				</view>
				<view class="price">
					<text>{{item.price}}</text>
					<text>￥{{item.souPrice}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				total: 0,
				timer: null,
				timer2: null,
				twoheadtypeList: [],
				loveList: [],
				params: {
					pageSize: 6,
					pageNum: 1,
					type: 5,
					// top: 1,
					content: ''
				},
				list1: []
			}
		},
		onPullDownRefresh() {
			uni.showLoading({
				title: '加载中'
			});
			this.params.pageNum = 1
			this.getList()
			this.timer = setTimeout(() => {
				uni.stopPullDownRefresh()
				uni.hideLoading();
			}, 1000)
		},
		onReachBottom() {
			this.getBottom()
		},
		onUnload() {
			console.log(123)
			if (this.timer2) {
				clearTimeout(this.timer2); // 清除定时器  
			}
		},
		methods: {
			async getBottom() {
				const that = this
				if (this.loveList.length < this.total) {
					this.params.pageNum++
					uni.showLoading({
						title: '加载中'
					});
					uni.request({
						url: that.$baseurl + "/font/list",
						method: 'GET',
						data: that.params,
						success(res) {
							that.loveList = [...that.loveList, ...res.data.rows]
						}
					})
					uni.hideLoading();
				} else {
					this.$refs.uToast.show({
						type: 'default',
						title: '默认主题',
						message: "到底了...",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
					})
				}
			},
			click(item) {
				this.params.twoheadType = this.list1[item.index].id
				this.getList()
			},
			async getList() {
				this.user = uni.getStorageSync("loginUser")
				if (this.user !== '' && this.user !== null && this.user !== undefined) {
					this.params.loginId = this.user.id
				}
				const res = await this.$myRuquest({
					url: '/font/list',
					data: this.params
				})
				this.loveList = res.data.rows
				this.total = res.data.total
			},
			nation(id) {
				uni.navigateTo({
					url: "/pagesa/twoHeadMarkObj/twoHeadMarkObj?id=" + id
				})
			},
			rightClick() {
				uni.navigateBack()
				console.log('rightClick');
			},
			leftClick() {
				uni.navigateBack()
				console.log('leftClick');
			},
			async getType() {
				const res = await this.$myRuquest({
					url: '/font/getTwoHeadType'
				})
				this.list1 = this.twoheadtypeList = res.data.rows
				this.list1.unshift({name:"全部",id:''})
			}
		},
		onLoad() {
			this.getType()
			this.getList()
		}
	}
</script>

<style lang="scss">
	.goods_list {
		padding: 0 15rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.goods_item {
			background: #fff;
			width: 355rpx;
			margin-top: 10px;
			// margin: 10px 0;
			padding: 15rpx;
			box-sizing: border-box;

			image {
				width: 100%;
				height: 150px;
				display: block;
				margin: 5px auto;
			}

			.price {
				color: $shop-color;
				font-size: 36rpx;

				text:nth-child(2) {
					color: #ccc;
					font-size: 28rpx;
					margin-left: 17rpx;
					text-decoration: line-through;
				}
			}

			.name {
				font-size: 28rpx;
				line-height: 50rpx;
				padding-bottom: 15rpx;
				padding-top: 10rpx;
			}
		}
	}
</style>